import React from 'react'
import {
  Form,
  Input as AntInput,
  Cascader,
  TreeSelect,
  TimePicker,
  DatePicker,
  InputNumber,
  Radio,
  Checkbox,
  Switch,
  Col,
} from 'antd'
import { Input, Select, Upload } from '@/components'
import { FormItem } from '../formTypes'
import { OptionsUtil, TimeUtil } from '@/utils'
import { FormItemType } from '../formTypes'

const { TextArea, Password } = AntInput
const { RangePicker } = DatePicker

interface RenderFormItemProps {
  config: FormItem
}

interface RenderFormItemsProps {
  formConfigs: FormItem[]
}

const getPlaceholder = (type: any, label: any = '', placeholder: any) => {
  if (!type) return
  if (placeholder) return placeholder
  if (['Cascader', 'Select', 'TreeSelect'].includes(type)) {
    return `请选择${label}`
  }
  if (['Input', 'Password', 'TextArea'].includes(type)) {
    return `请输入${label}`
  }
  // return '请输入'
}

export const RenderFormItem = ({ config }: RenderFormItemProps): JSX.Element => {
  const { type, formItemProps, props = {}, render, span } = config
  const placeholder = getPlaceholder(type, formItemProps?.label, props.placeholder)
  if (render) {
    if (span) {
      return <Col span={span}>{render()}</Col>
    }
    return render()
  }
  let element: React.ReactElement | null = null

  switch (type) {
    case 'Upload':
      element = <Upload {...props} />
      break
    case 'Select':
      element = <Select allowClear placeholder={placeholder} maxTagCount="responsive" {...props} />
      break
    case 'Cascader': // 级联选择器
      element = <Cascader allowClear placeholder={placeholder} {...props} />
      break
    case 'TreeSelect':
      element = (
        <TreeSelect
          treeData={OptionsUtil.getSimpleTreeData(props.options)}
          treeCheckable
          showCheckedStrategy={'SHOW_PARENT'}
          treeExpandedKeys={['all']}
          multiple
          allowClear
          placeholder={placeholder}
          maxTagCount="responsive"
          {...props}
        />
      )
      break
    case 'RadioGroup':
      element = <Radio.Group size="small" {...props} />
      break
    case 'CheckboxGroup':
      element = <Checkbox.Group {...props} />
      break
    case 'Checkbox':
      element = <Checkbox {...props} />
      break
    case 'TimePicker':
      element = <TimePicker {...props} />
      break
    case 'DatePicker':
      element = <DatePicker allowClear {...props} />
      break
    case 'RangePicker':
      element = <RangePicker allowClear showTime presets={TimeUtil.getRangePresets()} {...props} />
      break
    case 'Switch':
      element = <Switch {...props} />
      break
    case 'TextArea':
      element = <TextArea allowClear placeholder={placeholder} rows={4} {...props} />
      break
    case 'Input':
      element = <Input allowClear placeholder={placeholder} {...props} />
      break
    case 'Password':
      element = <Password allowClear placeholder={placeholder} {...props} />
      break
    case 'InputNumber':
      element = <InputNumber allowClear {...props} />
      break
    default:
      element = null
      break
  }
  if (span)
    return (
      <Col span={span}>
        <Form.Item {...formItemProps}>{element}</Form.Item>
      </Col>
    )
  return <Form.Item {...formItemProps}>{element}</Form.Item>
}

export const RenderFormItems = ({ formConfigs }: RenderFormItemsProps) => (
  <>
    {formConfigs.map((formConfig, idx) => (
      <RenderFormItem key={formConfig?.formItemProps?.name?.toString() || idx} config={formConfig} />
    ))}
  </>
)
